  <!-- Top navbar. -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <!-- The logo. -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-logo">
            <a href="{{ site.baseurl }}/"><img alt="Apache Flink" src="{{ site.baseurl }}/img/navbar-brand-logo.jpg" width="78px" height="40px"></a>
          </div>
        </div><!-- /.navbar-header -->

        <!-- The navigation links. -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <!-- Overview -->
            <li{% if page.url == '/index.html' %} class="active"{% endif %}><a href="{{ site.baseurl }}/index.html">Overview</a></li>

            <!-- Quickstart -->
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Quickstart <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="{{ site.docs-stable }}/quickstart/setup_quickstart.html">Setup</a></li>
                <li><a href="{{ site.docs-stable }}/quickstart/java_api_quickstart.html">Java API</a></li>
                <li><a href="{{ site.docs-stable }}/quickstart/scala_api_quickstart.html">Scala API</a></li>
                <li><a href="{{ site.docs-stable }}/quickstart/run_example_quickstart.html">Run Step-by-Step Example</a></li>
              </ul>
            </li>

            <!-- Features -->
            <li{% if page.url == '/features.html' %} class="active"{% endif %}><a href="{{ site.baseurl }}/features.html">Features</a></li>

            <!-- Downloads -->
            <li{% if page.url == '/downloads.html' %} class="active"{% endif %}><a href="{{ site.baseurl }}/downloads.html">Downloads</a></li>

            <!-- Documentation -->
            <li class="dropdown">
              <a href="{{ setup }}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Documentation <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <!-- Latest stable release -->
                <li role="presentation" class="dropdown-header"><strong>Latest Release</strong> (Stable)</li>
                <li><a href="{{ site.docs-stable }}">{{ site.stable }} Documentation</a></li>
                <li><a href="{{ site.docs-stable }}/api/java" class="active">{{ site.stable }} Javadocs</a></li>
                <li><a href="{{ site.docs-stable }}/api/scala/index.html" class="active">{{ site.stable }} ScalaDocs</a></li>

                <!-- Snapshot docs -->
                <li class="divider"></li>
                <li role="presentation" class="dropdown-header"><strong>Snapshot</strong> (Development)</li>
                <li><a href="{{ site.docs-snapshot }}">{{ site.snapshot }} Documentation</a></li>
                <li><a href="{{ site.docs-snapshot }}/api/java" class="active">{{ site.snapshot }} Javadocs</a></li>
                <li><a href="{{ site.docs-snapshot }}/api/scala/index.html" class="active">{{ site.snapshot }} ScalaDocs</a></li>

                <!-- Wiki -->
                <li class="divider"></li>
                <li><a href="{{ site.wiki }}"><small><span class="glyphicon glyphicon-new-window"></span></small> Wiki</a></li>
              </ul>
            </li>

            <!-- FAQ -->
            <li{% if page.url == '/faq.html' %} class="hidden-sm active"{% endif %}><a href="{{ site.baseurl }}/faq.html">FAQ</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            <!-- Blog -->
            <li class="{% if page.url contains '/blog/' or page.url contains '/news/' %} active{% endif %} hidden-md hidden-sm"><a href="{{ site.baseurl }}/blog/">Blog</a></li>

            <li class="dropdown{% if page.url == '/community.html' or page.url == '/how-to-contribute.html' or page.url == '/coding-guidelines.html' %} active{% endif %} hidden-md hidden-sm">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Community <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <!-- Community -->
                <li role="presentation" class="dropdown-header"><strong>Community</strong></li>
                <li><a href="{{ site.baseurl }}/community.html#mailing-lists">Mailing Lists</a></li>
                <li><a href="{{ site.baseurl }}/community.html#irc">IRC</a></li>
                <li><a href="{{ site.baseurl }}/community.html#stack-overflow">Stack Overflow</a></li>
                <li><a href="{{ site.baseurl }}/community.html#issue-tracker">Issue Tracker</a></li>
                <li><a href="{{ site.baseurl }}/community.html#source-code">Source Code</a></li>
                <li><a href="{{ site.baseurl }}/community.html#people">People</a></li>

                <!-- Contribute -->
                <li class="divider"></li>
                <li role="presentation" class="dropdown-header"><strong>Contribute</strong></li>
                <li><a href="{{ site.baseurl }}/how-to-contribute.html">How to Contribute</a></li>
                <li><a href="{{ site.baseurl }}/coding-guidelines.html">Coding Guidelines</a></li>
              </ul>
            </li>

            <li class="dropdown{% if page.url == '/material.html' %} active{% endif %} hidden-md hidden-sm">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Project <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <!-- Project -->
                <li role="presentation" class="dropdown-header"><strong>Project</strong></li>
                <li><a href="{{ site.baseurl }}/material.html">Material</a></li>
                <li><a href="{{ site.twitter }}"><small><span class="glyphicon glyphicon-new-window"></span></small> Twitter</a></li>
                <li><a href="{{ site.github }}"><small><span class="glyphicon glyphicon-new-window"></span></small> GitHub</a></li>
                <li><a href="{{ site.wiki }}"><small><span class="glyphicon glyphicon-new-window"></span></small> Wiki</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>
